<template>
	<view class="article">
		<NavbarCustom leftIconColor="#333333" bgColor="transparent" isBack
			:left="{imageUrl:leftImageUrl,width:'48rpx'}" />
		<view class="background">

		</view>
		<view class="content">
			<view class="head">
				<image :src="info.cover" mode="aspectFill" class="cover" v-if="info.cover"></image>
				<view class="hot-info">
					<view class="hot-title ellipsis-3">
						{{info.title}}
					</view>
					<view class="author">
						<!-- <text>作者：</text> -->
						<text>{{info.subtitle}}</text>
					</view>
				</view>
			</view>
			<view class="article-body">
				<rich-text :nodes="info.content"></rich-text>
			</view>
		</view>

		<view class="bottom-view">
			<BottomButtons :info="info" @left="clickCollection" @cancel="clickAudio" @sure="clickVideo"></BottomButtons>
		</view>
	</view>
</template>

<script setup>
	import NavbarCustom from "@/components/navbar-custom/index.vue"
	import BottomButtons from "./components/bottom-buttons.vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		reactive,
		ref
	} from "vue";
	import {
		getArticleInfo,
		addFavorite,
		removeFavorite,
	} from "@/api/article";
	const leftImageUrl = ref("/static/images/login/loginfanhui@3x.png")
	const id = ref('')
	const info = ref({})
	onLoad((options) => {
		if (options && options.id) {
			id.value = options.id
			getDetail()
		}
	})

	const getDetail = async () => {
		try {
			let res = await getArticleInfo({
				id: id.value
			})
			info.value = res.data
			console.log(info.value)
		} catch (e) {
			console.log(e);
			//TODO handle the exception
		}
	}


	const clickCollection = async () => {
		try {
			let res=null
			let params={
				articleId:id.value
			}
			if(info.value.favorited==="1"){
				res=await removeFavorite(params)
			}else{
				res=await addFavorite(params)
			}
			if(res.code===0){
				uni.$emit("index-collection-list")
				info.value.favorited = info.value.favorited==="1"?"0":"1"
			}
		} catch (error) {
			console.log(error);
		}
	}
	
	
	const clickAudio = () => {
		uni.$u.route({
			url: "/pages/article/audio/audio",
			params: {
				id: info.value.id
			}
		})
	}
	const clickVideo = () => {
		uni.$u.route({
			url: "/pages/article/video/video",
			params: {
				id: info.value.id
			}
		})
	}
</script>

<style lang="scss" scoped>
	.article {
		position: relative;
		min-height: 100vh;
		background: #FFFFFF;

		.background {
			width: 100%;
			height: 780rpx;
			top: 0;
			left: 0;
			position: absolute;
			background: linear-gradient(180deg, #90e4ed 0%, #FFFFFF 100%);
		}

		.content {
			position: relative;
			z-index: 10;
			padding: 32rpx;
			padding-bottom: 128rpx;

			.head {
				display: flex;
				align-items: flex-start;
				margin-bottom: 80rpx;

				.cover {
					width: 196rpx;
					height: 260rpx;
					border-radius: 20rpx;
					overflow: hidden;
					margin-right: 30rpx;
				}

				.hot-info {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: left;
					padding-top: 20rpx;

					.hot-title {
						width: 440rpx;
						font-size: 44rpx;
						font-weight: bold;
						color: #1A1A1A;
						line-height: 58rpx;
					}

					.author {
						font-size: 28rpx;
						color: #939999;
						line-height: 28rpx;
						margin-top: 20rpx;
					}
				}
			}

			.article-body {

				font-size: 28rpx;
				line-height: 44rpx;
				color: #1A1A1A;
			}
		}

		.bottom-view {
			background-color: #FFFFFF;
			position: fixed;
			z-index: 9999;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
		}
		@media screen and (min-width: 500px) {
			.bottom-view {
				max-width: 500px;
			}
		}
	}
</style>